<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="">
		<p>select your favoriy sprot</p>
		<p>
			<label for="">
				<input type="checkbox" name="" id="">足球
			</label>
		</p>
		<p>
			<label for="">
				<input type="checkbox" name="" id="">篮球
			</label>
		</p>
		<p>
			<label for="">
				<input type="checkbox" name="" id="">游泳
			</label>
		</p>
		<p>
			<label for="">
				<input type="checkbox" name="" id="">足球
			</label>
		</p>
		<p>
			<label for="">
				<input type="checkbox" name="" id="">篮球
			</label>
		</p>
		<p>
			<label for="">
				<input type="checkbox" name="" id="">游泳
			</label>
		</p>
		<p>
			<label for="">
				<input type="checkbox" name="" id="">足球
			</label>
		</p>
		<p>
			<label for="">
				<input type="checkbox" name="" id="">篮球
			</label>
		</p>
		<p>
			<label for="">
				<input type="checkbox" name="" id="">游泳
			</label>
		</p>
	</form>
	<p>
	<button id='all'>全选</button>
	<button id='notall'>全不选</button>
	<button id='unall'>反选</button>
	</p>
</body>
<script type="text/javascript">
	all=document.getElementById('all');
	notall=document.getElementById('notall');
	unall=document.getElementById('unall');
	objs=document.getElementsByTagName('input');
all.onclick=function(){
	for(i=0;i<objs.length;i++){
		objs[i].checked=true;
	}
}


notall.onclick=function(){
	for(i=0;i<objs.length;i++){
		objs[i].checked=false;
	}
}

unall.onclick=function(){
	for(i=0;i<objs.length;i++){

		// objs[i].checked=objs[i].checked?false:true;
		objs[i].checked=!objs[i].checked;
	}
}
</script>
</html>